<template>
  <div>
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="16" justify="space-between">
          <el-col :xl="21" :lg="21" :md="21" :sm="21" :xs="21"> 项目数据总览 </el-col>
          <!-- <el-col :xl="3" :lg="3" :md="3" :sm="3" :xs="3">
            <el-button v-hasPermi="['']" type="primary"> 导出 </el-button>
            <el-button v-hasPermi="['']" type="default"> 分享 </el-button>
          </el-col> -->
        </el-row>
      </el-skeleton>
    </el-card>
    <!-- <el-card shadow="never" class="mt-8px"> -->
    <el-skeleton :loading="loading" animated>
      <el-row :gutter="16" justify="space-between mt-8px">
        <el-col :xl="18" :lg="18" :md="18" :sm="18" :xs="18">
          <el-card shadow="never" class="">
            <el-row :gutter="16" justify="space-between">
              <el-col
                :xl="3"
                :lg="3"
                :md="3"
                :sm="3"
                :xs="3"
                v-for="(item, index) of statistics"
                :key="index"
              >
                <div class="px-8px text-center pt-10px pb-10px">
                  <CountTo
                    class="text-24px"
                    :start-val="0"
                    :end-val="item.count"
                    :duration="2600"
                  />
                  <div class="mb-8px mt-20px text-14px text-gray-400">{{ item.name }}</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="6" :sm="6" :xs="6">
          <el-card shadow="never" class="">
            <template #header>
              <div class="h-3 flex justify-between">
                <span>{{ t('report.lang') }}</span>
              </div>
            </template>
            <el-skeleton :loading="loading" animated>
              <Echart :options="barOptionsClassify" :height="50" />
            </el-skeleton>
          </el-card>
        </el-col>
      </el-row>
    </el-skeleton>
    <!-- </el-card> -->
    <el-card shadow="never" class="mt-8px">
      <template #header>
        <div class="h-3 flex justify-between">
          <span>{{ t('report.defect') }}</span>
        </div>
      </template>
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="16" justify="space-between">
          <el-col
            :xl="3"
            :lg="3"
            :md="3"
            :sm="3"
            :xs="3"
            v-for="(item, index) of defects"
            :key="index"
          >
            <el-card shadow="hover" :style="{ background: item.color }">
              <div class="px-8px text-left" style="color:#fff">
                <div class="mb-8px text-14px">{{ item.name }}</div>
                <CountTo class="text-20px" :start-val="0" :end-val="item.count" :duration="2600" />
                <div class="text-12px mt-8px">新增{{ item.name }}缺陷 {{ item.count }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
    <el-card shadow="never" class="mt-8px">
      <template #header>
        <div class="h-3 flex justify-between">
          <span>{{ t('report.defectChart') }}</span>
        </div>
      </template>
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="20" justify="space-between">
          <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
            <el-card shadow="hover" class="mb-8px">
              <el-skeleton :loading="loading" animated>
                <Echart :options="barOptionsLevel" :height="400" />
              </el-skeleton>
            </el-card>
          </el-col>
          <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
            <el-card shadow="hover" class="mb-8px">
              <el-skeleton :loading="loading" animated>
                <Echart :options="horizontalBarOptionsData" :height="400" />
              </el-skeleton>
            </el-card>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
    <el-card shadow="never" class="mt-8px">
      <template #header>
        <div class="h-3 flex justify-between">
          <span>测试概要统计</span>
        </div>
      </template>
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="20" justify="space-between">
          <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
            <el-card shadow="hover" class="mb-8px">
              <el-skeleton :loading="loading" animated>
                <Echart :options="lineOptions" :height="400" />
              </el-skeleton>
            </el-card>
          </el-col>
          <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
            <el-card shadow="hover" class="mb-8px">
              <el-skeleton :loading="loading" animated>
                <Echart :options="pieOptionsData" :height="400" />
              </el-skeleton>
            </el-card>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import type { Defect } from './types'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { horizontalBarOptions, barOptions, barClassifyOptions ,multipleLineOptions, pieOptions} from './echarts-data'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const loading = ref(true)
const { t } = useI18n()
const horizontalBarOptionsData = reactive<EChartsOption>(horizontalBarOptions) as any
const barOptionsLevel = reactive<EChartsOption>(barOptions) as any
const barOptionsClassify = reactive<EChartsOption>(barClassifyOptions) as any
const lineOptions = reactive<EChartsOption>(multipleLineOptions) as any
const pieOptionsData = reactive<EChartsOption>(pieOptions) as any

const init = () => {
  const textColor = appStore.getIsDark ? '#fff' : 'rgb(48, 49, 51)'
  barOptionsClassify.legend.textStyle.color = textColor
  barOptionsClassify.yAxis.axisLabel.textStyle.color = textColor
  barOptionsLevel.title.textStyle.color = textColor
  barOptionsLevel.title.subtextStyle.color = textColor
  barOptionsLevel.xAxis.axisLabel.textStyle.color = textColor
  barOptionsLevel.xAxis.axisLabel.textStyle.rich.a.color = textColor
  barOptionsLevel.xAxis.axisLabel.textStyle.rich.b.color = textColor
  horizontalBarOptionsData.title.textStyle.color = textColor
  horizontalBarOptionsData.title.subtextStyle.color = textColor
  horizontalBarOptionsData.yAxis[0].axisLabel.textStyle.color = textColor
  horizontalBarOptionsData.yAxis[1].axisLabel.textStyle.color = textColor
  lineOptions.title[0].textStyle.color = textColor
  lineOptions.legend.textStyle.color = textColor
  lineOptions.xAxis.axisLine.lineStyle.color = textColor
  lineOptions.xAxis.axisLabel.textStyle.color = textColor
  lineOptions.yAxis.axisLine.lineStyle.color = textColor
  lineOptions.yAxis.splitLine.lineStyle.color = textColor
  lineOptions.yAxis.axisLabel.textStyle.color = textColor
  pieOptionsData.title.textStyle.color = textColor
  pieOptionsData.legend.textStyle.color = textColor
}
watchEffect(() => {
  init()
})
// 语言分类统计
const getLangType = async () => {
  const data = [
    { value: 100, name: 'java' },
    { value: 10, name: 'vue' }
  ]
  const color = ['#0A53E9', '#0875EE', '#069CF2', '#02C7EA', '#1AB8E6']
  const result = data.map((item, index) => {
    return {
      name: item.name,
      type: 'bar',
      stack: '总数',
      barMinHeight: 10,
      itemStyle: {
        normal: {
          color: color[index],
          borderRadius: index == 0 ? [10, 0, 0, 10] : index == data.length - 1 ? [0, 10, 10, 0] : []
        }
      },
      data: [item.value]
    }
  })
  set(barOptionsClassify, 'series', result)
}

// 缺陷重要程度
const getDefectsLevel = async () => {
  const data = [
    { value: 100, name: '异常1', percent: '0' },
    { value: 90, name: '异常2', percent: '0' },
    { value: 80, name: '异常3', percent: '0' },
    { value: 70, name: '异常4', percent: '0' },
    { value: 60, name: '异常5', percent: '0' },
    { value: 50, name: '异常6', percent: '0' },
    { value: 40, name: '异常7', percent: '0' },
    { value: 30, name: '异常8', percent: '0' },
    { value: 20, name: '异常9', percent: '0' },
    { value: 10, name: '异常10', percent: '0' }
  ]
  const sum = data.reduce((a, b) => a + b.value, 0)
  data.forEach((item) => {
    item.percent = `${((item.value / sum) * 100).toFixed(2)}%`
  })
  set(
    barOptionsLevel,
    'xAxis.data',
    data.map((v) => `${v.percent}\n${t(v.name)}`)
  )
  set(
    barOptionsLevel,
    'series[0].data',
    data.map((v) => v.value)
  )
  set(
    barOptionsLevel,
    'series[1].data',
    data.map((v) => v.value)
  )
  set(
    barOptionsLevel,
    'series[2].data',
    data.map((v) => v.value)
  )
  set(
    barOptionsLevel,
    'series[3].data',
    data.map((v) => v.value)
  )
  set(
    barOptionsLevel,
    'series[4].data',
    data.map((v) => v.value)
  )
}

// 缺陷数量
const getDefectsCount = async () => {
  const data = [
    { value: 99, name: '系统信息泄露' },
    { value: 98, name: '未释放资源' },
    { value: 80, name: '路径操作' },
    { value: 77, name: '依赖性比较' },
    { value: 40, name: '异常捕获' },
    { value: 30, name: '异常1' },
    { value: 28, name: '异常2' },
    { value: 25, name: '异常3' },
    { value: 20, name: '异常4' },
    { value: 10, name: '异常5' }
  ]
  set(
    horizontalBarOptionsData,
    'yAxis[0].data',
    data.map((v) => t(v.name))
  )
  set(
    horizontalBarOptionsData,
    'yAxis[1].data',
    data.map((v) => v.value)
  )
  set(
    horizontalBarOptionsData,
    'series[0].data',
    data.map((v) => v.value)
  )
}
// 获取缺陷统计
let defects = reactive<Defect[]>([])
const getDefects = async () => {
  const data = [
    {
      name: '致命',
      count: 26,
      color: 'rgb(124 16 16)'
    },
    {
      name: '严重',
      count: 60,
      color: 'rgb(215 25 25)'
    },
    {
      name: '重要',
      count: 23,
      color: 'rgb(225 86 72)'
    },
    {
      name: '次要',
      count: 2,
      color: '#FFA500'
    },
    {
      name: '提示',
      count: 262,
      color: 'rgb(191 173 15)'
    },
    {
      name: '强制',
      count: 110,
      color: '#2196F3'
    },
    {
      name: '建议',
      count: 133,
      color: '#008000'
    }
  ]
  defects = Object.assign(defects, data)
}

// 获取分类统计
let statistics = reactive<Defect[]>([])
const getStatistics = async () => {
  const data = [
    {
      name: '缺陷总数',
      count: 26
    },
    {
      name: '文件数',
      count: 60
    },
    {
      name: '代码行数',
      count: 23
    },
    {
      name: '代码注释率',
      count: 2
    },
    {
      name: '平均圈复杂度',
      count: 262
    },
    {
      name: '重要缺陷密度',
      count: 110
    },
    {
      name: '检测耗时',
      count: 133
    }
  ]
  statistics = Object.assign(statistics, data)
}

const getAllApi = async () => {
  await Promise.all([
    getDefects(),
    getStatistics(),
    getDefectsCount(),
    getDefectsLevel(),
    getLangType()
  ])
  loading.value = false
}

getAllApi()
</script>

<style scoped></style>
